<template>
  <div>
    <div class="title">
      <a-row>
        <slot name="title" v-if="$slots.title" />
        <span v-else>{{ title }}</span>
      </a-row>
    </div>
    <a-descriptions
      bordered
      :column="column"
      size="small"
      v-if="items.length > 0"
      class="detail"
    >
      <template v-for="(item, index) in items">
        <a-descriptions-item
          :label="item.label"
          :key="index"
          :span="item.span || 1"
        >
          <template v-if="item.type === 'money'">
            <div :style="{ color: item.color ? item.color : '#000000A6' }">
              ￥{{ data[item.key] | money }}
            </div>
          </template>
          <template v-else-if="item.type === 'date'">{{
            data[item.key] | datefmt(item.format)
          }}</template>
          <template v-else-if="item.type === 'img'">
            <img :src="data[item.key]" alt="file" width="20" height="20" />
          </template>
          <template v-else>{{ data[item.key] || '--' }}</template>
        </a-descriptions-item>
      </template>
    </a-descriptions>
  </div>
</template>

<script>

export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    column: {
      type: Number,
      default: 2
    },
    items: {
      type: Array,
      default: () => []
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
    }
  },
  mounted () {},
  methods: {
    showDetail () {
      // 点击协议名称显示详情
      this.$emit('showDetail', true)
    }
  }
}
</script>

<style>
.detail .ant-descriptions-view {
  border: 0;
}

.detail .ant-descriptions-row {
  border: 0;
}

.detail .ant-descriptions-item-label {
  border: 0;
  background-color: white;
  padding: 8px 8px !important;
  padding-right: 0 !important;
  text-align: right;
  width: 15%;
  /*width: 180px;*/
}

.detail .ant-descriptions-item-content {
  border: 0;
  background-color: white;
  padding: 8px 8px !important;
  padding-left: 0 !important;
  width: 35%;
}

.title {
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
}
.blue-text {
  color: #02a7f0;
  cursor: pointer;
  display: inline-block;
  margin-right: 10px;
}
</style>
